<template>
  <zh-sheet
    :color="props.color"
    :_class="[customClass, 'flex-col']"
    :_style="[customCSSStyle]"
    :followTheme="props.followTheme"
    :dark="props.dark"
    :round="props.round"
    :shadow="props.shadow"
    :outlined="props.outlined"
    :border="props.border"
    :borderStyle="props.borderStyle"
    :borderDirection="props.borderDirection"
    :text="props.text"
    :transprent="props.transprent"
    :linear="props.linear"
    :linearDeep="props.linearDeep"
    :width="props.width"
    :height="props.height"
    :margin="props.margin"
    :padding="props.padding"
  >
    <view class="flex-row flex flex-between pt-24">
      <slot name="title"><zh-text :font-size="28" _class="text-weight-b" :label="props.title"></zh-text></slot>
      <slot name="status"><zh-text :followTheme="false" :color="props.statusColor" :font-size="26" :label="props.status"></zh-text></slot>
    </view>
    <zh-divider></zh-divider>
    <view class="pb-24 flex wrap">
      <view style="width: 100%">
        <slot name="content"><zh-text :font-size="26" _class="wrap" :label="props.content"></zh-text></slot>
      </view>
    </view>
    <view class="flex pb-16">
      <slot name="action"></slot>
    </view>
  </zh-sheet>
</template>

<script lang="ts" setup>
/**
 * 卡片
 */
import { computed, PropType } from 'vue';
import { custom_props, computedClass, computedStyle } from '@/tool/lib/minxs';
const props = defineProps({
  ...custom_props,
  shadow: {
    type: [Number],
    default: 2,
  },
  round: {
    type: [Number],
    default: 6,
  },
  border: {
    type: [Number],
    default: 0,
  },
  margin: {
    type: Array as PropType<Array<number>>,
    default: () => [32, 0, 32, 24],
  },
  padding: {
    type: Array as PropType<Array<number>>,
    default: () => [24, 0],
  },
  transprent: {
    type: [Boolean],
    default: false,
  },
  color: {
    type: String,
    default: 'white',
  },
  width: {
    type: [Number],
    default: 0,
  },
  height: {
    type: [Number],
    default: 0,
  },
  title: {
    type: [String],
    default: '',
  },
  status: {
    type: [String],
    default: '',
  },
  statusColor: {
    type: [String],
    default: 'primary',
  },
  content: {
    type: [String],
    default: '',
  },
});
//自定义样式：
const customCSSStyle = computed(() => computedStyle(props));
//自定类
const customClass = computed(() => computedClass(props));
</script>
<style></style>
